
import { motion, useMotionValue, useTransform } from "framer-motion";
import { useState } from "react";

const animations = {
  show: {
    opacity: 1
  },
  hidden: {
    opacity: 0
  }
}

const list = {
  visible: { opacity: 1, x: 100 },
  hidden: { opacity: 0 },
}

const item = {
  visible: { opacity: 1, x: 0 },
  hidden: { opacity: 0, x: -100 },
}

const variants = {
  visible: (i: number) => {
    return {
      x: i,
      opacity: 1,
      transition: {
        delay: 2,
      },
    }
  },
  hidden: (i: number) => {
    return {
      x: i,
      opacity: 0,
    }
  }
}

const Motion = () => {
  const [data, setData] = useState([1])
  return <div style={{
    display: 'flex',
    height: '800px',
  }}>
    <motion.div
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'white',
        borderRadius: '20px'
      }}
      transition={{
        duration: 2
      }}
      variants={animations}
      initial='hidden'
      animate='show'
    >
    </motion.div>

    <motion.ul
      initial="hidden"
      animate="visible"
      variants={list}
    >
      <motion.li variants={item} />
      <motion.li variants={item} />
      <motion.li variants={item} />
    </motion.ul>


    <motion.div
      style={{
        width: 100,
        height: 100,
        backgroundColor: 'white',
        borderRadius: '20px',
      }}
      initial="hidden"
      animate="visible"
      custom={200}
      variants={variants}
    >variants function</motion.div>

  </div>
}

export default Motion;